<template>
  <div class="dashboard-header">
    <h1 class="dashboard-title">器具货主公司Dashboard</h1>
    <div class="dashboard-filters">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="handleDateRangeChange"
      />
      <el-select v-model="selectedProject" placeholder="选择项目" clearable @change="handleProjectChange">
        <el-option
          v-for="project in projectOptions"
          :key="project.value"
          :label="project.label"
          :value="project.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DashboardHeader',
  props: {
    dateRange: {
      type: Array,
      default: () => []
    },
    selectedProject: {
      type: String,
      default: ''
    },
    projectOptions: {
      type: Array,
      default: () => [
        { label: '全部项目', value: '' },
        { label: '工程项目A', value: 'projectA' },
        { label: '工程项目B', value: 'projectB' },
        { label: '工程项目C', value: 'projectC' }
      ]
    }
  },
  methods: {
    handleDateRangeChange(dates) {
      this.$emit('date-range-change', dates)
    },
    handleProjectChange(project) {
      this.$emit('project-change', project)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  .dashboard-title {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin: 0;
  }
  
  .dashboard-filters {
    display: flex;
    gap: 12px;
    align-items: center;
  }
}
</style>
